<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="main">
<svg version="1.1" id="nav" onclick="menuIn()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="85.387 0 671.116 595.281" enable-background="new 85.387 0 671.116 595.281" xml:space="preserve">
<rect id="burger1" x="85.387" y="0" fill="#333333" width="671.116" height="119.459"/>
<rect id="burger2" x="85.387" y="236.233" fill="#333333" width="671.116" height="119.459"/>
<rect id="burger3" x="85.387" y="475.822" fill="#333333" width="671.116" height="119.459"/>
</svg>
</div>
<div id="menu">OUT FROM UNDER</div>
<script>
var menu = new TimelineMax({paused:true, reversed:true})
menu
.to("#burger1", .5, {rotation: 45, transformOrigin: "left 50%", ease:Power2.easeInOut}, "cross")
.to("#burger2", .5, {autoAlpha: 0}, "cross")
.to("#burger3", .5, {rotation: -45, transformOrigin: "left 50%", ease:Power2.easeInOut}, "cross")
.to("#main", 0.75, {x: "-300px", ease:Power2.easeInOut})
function menuIn() {
menu.reversed() ? menu.play() : menu.reverse();
}
</script>
